<template>
  <div class="enentPage">
    <div class="header">
      <el-date-picker v-model="listQuery.startTime"
        style="width: 140px;margin-bottom: 5px;margin-right: 5px" type="datetime"
        placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">
      </el-date-picker>
      <el-date-picker v-model="listQuery.endTime" style="width: 140px" type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
      <el-input v-model="listQuery.name" style="width: 140px;margin-right: 5px;"
        placeholder="请输入人员名称" clearable @keyup.enter.native="search()" />
      <el-button type="primary" @click="search">查询</el-button>
    </div>
    <div class="content">
      <div class="imgs" v-for="item in tableData">
        <el-image class="img" v-if="item.imageurl && item.imageurl.length > 0"
          style="width: 100%;height: 150px" :src="define.comUrl+item.imageurl[0].url"
          :preview-src-list="item.urlList" />
        <el-image class="img" v-else style="width: 100%;height: 150px" :src="csImg" />
        <span class="num">{{ item.imageurl.length }}</span>
        <span class="bom">{{item.realName}}({{ formatTimestamp(item.executionDate) }})</span>
        <span class="text">{{item.text}}</span>
      </div>
    </div>
    <!-- <div>
      <el-button size="mini" type="primary">地图上查看</el-button>
      <el-button size="mini" type="primary">列表详情</el-button>
    </div> -->
    <!-- <ElImageViewer v-if="showImg" @close="closeShowImg" :urlList="urlList" :isTxt="true"> -->
    <!-- 上传人：xxxxxx</br>拍摄事件:123456 -->
    <!-- </ElImageViewer> -->

  </div>
</template>

<script>

import request from "@/utils/request";
import wpworkMap from "@/components/wpworkMap/index.vue";
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
  name: 'fence',
  components: {
    wpworkMap,
    ElImageViewer
  },
  data() {
    return {
      csImg: require("../img/zwtp.png"),
      showImg: false,
      initialCoordinates: [],
      locationVisible2: false,
      tableData: [],
      listLoading: true,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        keyword: '',
        startTime: '',
        endTime: '',
        name: '',
      },
      total: 0,

    }
  },
  watch: {

  },
  computed: {

  },
  created() {
    this.getOrganizeList(true)
  },
  methods: {
    closeShowImg() {
      this.showImg = false
      console.log("🚀 ~ :79 ~ closeShowImg ~ this.showImg:", this.showImg)
    },
    openShowImg(item) {
      this.showImg = true
      this.urlList = item.imageurl.map(item => {
        return this.define.comUrl + item.url
      })
    },
    formatTimestamp(timestamp, format = 'YYYY-MM-DD HH:mm:ss') {
      if (!timestamp) return '暂无';
      const date = new Date(Number(timestamp)); // 确保是数字类型
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
      const day = String(date.getDate()).padStart(2, '0');

      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return format
        .replace('YYYY', year)
        .replace('MM', month)
        .replace('DD', day)
        .replace('HH', hours)
        .replace('mm', minutes)
        .replace('ss', seconds);
    },
    search() {
      this.initData()
    },
    getOrganizeList(isInit) {
      if (isInit) this.initData()
    },
    initData() {
      this.listLoading = true
      this.listLoading = true
      console.log("🚀 ~ :135 ~ initData ~ this.listQuery:", this.listQuery)
      this.listQuery.startTime = this.listQuery.startTime ? this.listQuery.startTime : ''
      this.listQuery.endTime = this.listQuery.endTime ? this.listQuery.endTime : ''
      this.listQuery.name = this.listQuery.name ? this.listQuery.name : ''
      request({
        url: `/api/example/WorkPersonJob/eventStatistics`,
        method: "post",
        params: this.listQuery
      }).then((res) => {
        console.log("🚀 ~ :122 ~ initData ~ res:", res)
        this.tableData = res.data;
        this.tableData.forEach(item => {
          item.imageurl = JSON.parse(item.imageurl)
          console.log("🚀 ~ :113 ~ initData ~ item.imageurl:", item.imageurl.length)
          item.urlList = item.imageurl.map(item => {
            return this.define.comUrl + item.url
          })
        });
        console.log("🚀 ~ :118 ~ initData ~ this.define.comUrl:", this.define.comUrl)
        console.log("🚀 ~ :112 ~ initData ~ this.tableData:", this.tableData)
        this.listLoading = false
      });
    },
    reset() {
      this.listQuery.startTime = ''
      this.listQuery.endTime = ''
      this.listQuery.name = ''
      this.initData()
    },
    position(row) {
      console.log("🚀 ~ :167 ~ position ~ row:", row)
      this.initialCoordinates = JSON.parse(row.executionLocation);
      this.locationVisible2 = true;
    },
    mapRtn() {
      this.locationVisible2 = false
    },
  }
}
</script>
<style scoped lang="scss">
.enentPage {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 10px;

  .header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .content {
    display: flex;
    flex-direction: column;
    height: calc(100% - 100px);
    margin-top: 10px;
    overflow: auto;

    .imgs {
      display: flex;
      flex-direction: column;
      margin-bottom: 5px;
      position: relative;
      border: 1px solid rgba(0, 0, 0, 0.6);
      color: #fff;
      cursor: pointer;

      .num,
      .bom {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.6);
        padding: 5px;
        text-align: center;
      }

      .num {
        left: 0;
        top: 0;
      }

      .bom {
        bottom: 20px;
        left: 0;
        right: 0;
      }
      .text {
        color: black;
        padding-top: 30px;
        text-align: center;
      }
    }
  }
}
</style>
